<template>
  <Row :gutter="16">
    <Col
      span="6"
      v-for="(item,index) in items"
      :key="index"
    >
    <Card
      :padding="0"
      :bordered="false"
      style="margin-bottom:10px;"
      @click.native="toCulture_details"
    >
      <div
        class="whyl_item"
        style="text-align:center"
      >
        <img
          :src="item.imgUrl"
          alt=""
          srcset=""
          height="160"
          width="160"
        ><br>
        {{item.title}}
        <div class="item_hover">
          <Card 
            style="background:none;height:100%;text-align:left"
          >
            <p>Content of card</p>
            <p>Content of card</p>
            <p>Content of card</p>
          </Card>
        </div>
      </div>
    </Card>
    </Col>
  </Row>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {          title: "美国连锁咖啡公司",
          imgUrl: require('../../assets/enter/item_img.png')
        },
        {          title: "路易•威登",
          imgUrl: require('../../assets/enter/item_img.png')
        },
        { title: "美国连锁咖啡公司", imgUrl: require('../../assets/enter/item_img.png') },
        { title: "美国连锁咖啡公司", imgUrl: require('../../assets/enter/item_img.png') },
        {          title: "美国连锁咖啡公司",
          imgUrl: require('../../assets/enter/item_img.png')        },
        { title: "路易•威登", imgUrl: require('../../assets/enter/item_img.png') },
        { title: "美国连锁咖啡公司", imgUrl: require('../../assets/enter/item_img.png') },
        { title: "美国连锁咖啡公司", imgUrl: require('../../assets/enter/item_img.png') },
        { title: "美国连锁咖啡公司", imgUrl: require('../../assets/enter/item_img.png') },
        { title: "路易•威登", imgUrl: require('../../assets/enter/item_img.png') },
        { title: "美国连锁咖啡公司", imgUrl: require('../../assets/enter/item_img.png') },
        { title: "美国连锁咖啡公司", imgUrl: require('../../assets/enter/item_img.png') },
      ]
    }
  },
  methods: {
    toCulture_details() {
      this.$router.push({
        name: 'culture_details'
      })
    }
  }
}
</script>

<style scoped lang="less">
.whyl_item {
  position: relative;
  .item_hover {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(104, 147, 190, 0.9);
    z-index: 100;
  }
}
.whyl_item:hover .item_hover {
  display: block;
}
</style>